{% extends "base.html" %}

{% block stylesheets %}
	<!-- <link rel="stylesheet" href="{{ url_for('views.themes', path='css/challenge-board.css') }}"> -->
{% endblock %}

{% block content %}

<div class="uk-section-default">
    <div class="uk-section uk-section-xlarge uk-light uk-background-cover" style="background-image: url({{ url_for('views.themes', path='img/challenges.jpg') }})">
        <div class="uk-container uk-container-medium uk-text-center">
            <h1 class='uk-heading-primary'>Challenges</h1>
        </div>
    </div>
</div>

{% if infos %}
<div class="uk-section-primary uk-preserve-color">
    <div class="uk-container uk-container-medium uk-text-center">
        <div id='errors' class='uk-margin-top'>
            {% for info in infos %}
            <div class="uk-alert-primary" uk-alert>
                <a class="uk-alert-close" uk-close></a>
                <h3 class="uk-text-center">{{ info }}</h3>
            </div>
            {% endfor %}
        </div>
    </div>
</div>
{% endif %}

{% if errors %}
<div class="uk-section-primary uk-preserve-color">
    <div class="uk-container  uk-container-medium uk-text-center">
        <div id='errors' class='uk-margin-top'>
            {% for error in errors %}
            <div class="uk-alert-danger" uk-alert>
                <a class="uk-alert-close" uk-close></a>
                <h3 class="uk-text-center">{{ error }}</h3>
            </div>
            {% endfor %}
        </div>
    </div>
</div>
{% endif %}

{% if admin or not errors %}

<div class="uk-section uk-section-secondary uk-preserve-color">
    <div class="uk-container uk-container-large">
        <div id='challenges-board'>
            <div class="uk-text-center">
                <div uk-spinner="ratio: 10"></div>
            </div>
        </div>
        <input id="nonce" type="hidden" name="nonce" value="{{ nonce }}">
        <div id="challenge-window" uk-modal class='uk-modal'>
        </div>
    </div>
</div>


<!-- <div class="container">
	<div id='challenges-board'>
		<div class="text-center">
			<i class="fas fa-circle-notch fa-spin fa-3x fa-fw spinner"></i>
		</div>
	</div>
</div>

<input id="nonce" type="hidden" name="nonce" value="{{ nonce }}">

<div class="modal fade" id="challenge-window" tabindex="-1" role="dialog">
</div> -->
{% endif %}
{% endblock %}

{% block scripts %}
	<script>
		var authed = {{ (id is defined) | tojson }};
	</script>
	<script src="{{ url_for('views.themes', path='js/utils.js') }}"></script>
	<script src="{{ url_for('views.themes', path='js/multi-modal.js') }}"></script>
	{% if admin or not errors %}
	<script src="{{ url_for('views.themes', path='js/challenges.js') }}"></script>
	<script src="{{ url_for('views.themes', path='js/hints.js') }}"></script>
	{% endif %}
	<script src="{{ url_for('views.themes', path='js/style.js') }}"></script>
{% endblock %}
